@CHARSET "UTF-8";
#message_home 
{
	position: absolute;
	left: 45%;
	bottom: 30px;
	font-size: 40px;
}


#experiment {
      -webkit-perspective: 800;
      -webkit-perspective-origin: 50% 200px;
      position: relative;
      display: center;
      margin-top: 100px;
}

.playlist {
      
      position: absolute;
      left: 20%;
      font-size: 40px;
      color: white;
}
img {
	width:100%;
	height: 100%;
}

img:hover {
    
}

#cube {
      position: relative;
      margin: 0 auto;
      height: 300px;
      width: 300px;
      -webkit-transition: -webkit-transform 0.5s linear;
      -webkit-transform-style: preserve-3d;
      z-index: 10;
      
      
      
}

.face {
      position: absolute;
      height: 300px;
      width: 300px;
      padding: 10px;
      background-color: royalblue;
      -webkit-transition: -webkit-all 0.5s ease-in-out;
      
}

.face:hover
{
   
      height: 300px;
      width: 300px;
      
      -moz-box-shadow: 0 0 5px rgba(248, 44, 44, 0.7);
      -webkit-box-shadow: 0 0 5px rgba(248, 44, 44, 0.7);
      box-shadow: 5px 5px 5px rgba(248, 44, 44, 0.7), -5px -5px 5px rgba(248, 44, 44, 0.7);
      
      
}

#cube .one  {
      -webkit-transform: rotateX(90deg) translateZ(160px);
}

#cube .two {
      -webkit-transform: translateZ(160px);
}

#cube .three {
      -webkit-transform: rotateY(90deg) translateZ(160px);
}

#cube .four {
      -webkit-transform: rotateY(180deg) translateZ(160px);
}

#cube .five {
      -webkit-transform: rotateY(-90deg) translateZ(160px);
}

#cube .six {
      -webkit-transform: rotateX(-90deg) translateZ(160px) rotate(180deg);
}